import { ICanvas, hasParentType } from './types/global'
import { ChildItem } from './ChildItem'
import DaoDaoMindMap from './DaodaoMindMap'
import { EventEmitter } from './EventEmitter'
import { fabric } from 'fabric'

export class Select extends EventEmitter{
	topLevel: DaoDaoMindMap
	canvas: ICanvas | null
	activeItems: ChildItem[]
	activeItem: ChildItem | null
	startPointer: fabric.Point | null | undefined
	selectBox: fabric.Rect | null
	constructor(topLevel: DaoDaoMindMap) {
		super()
		this.topLevel = topLevel
		this.canvas = topLevel.canvas
		this.activeItems = []
		this.activeItem = null
		this.startPointer = null
		this.selectBox = null
		this.init()
	}
	init() {
		// 绑定单选事件
		this.canvas?.on('mouse:down', (e) => {
			console.log(e)
			const target = e.target as hasParentType<fabric.Object | undefined>
			if(!target) {
				this.clear()
			}
			if(target && !target?.parent && !this.topLevel.sortFlag) {
				this.clear()
			}
			if(target && target?.parent) {
				this.clear()
				const parent = (e.target as hasParentType<fabric.Textbox>).parent
				if(parent) {
					this.select([parent])
				}
			}
			if(e.button === 3) {
				this.startPointer = e.absolutePointer
				if(this.startPointer){
					this.selectBox = new fabric.Rect({
						left: e.absolutePointer?.x,
						top: e.absolutePointer?.y,
						width: 0,
						height: 0,
						stroke: '#ffa261',
						fill: '#ffc9a3',
						opacity: 0.4
					})
					this.canvas?.add(this.selectBox)
				}
			}
		})
		this.canvas?.on('mouse:move', (e) => {
			if(this.selectBox) {
				const endPointer = e.absolutePointer
				if(endPointer && this.startPointer) {
					const top = endPointer.y > this.startPointer.y ? this.startPointer.y : endPointer.y
					const left = endPointer.x > this.startPointer.x ? this.startPointer.x : endPointer.x
					const width = Math.abs(endPointer.x - this.startPointer.x)
					const height = Math.abs(endPointer.y - this.startPointer.y)
					this.selectBox.setOptions({
						top,
						left,
						width,
						height
					})
					this.selectBox.setCoords()
					this.topLevel.mapData.forEach((item:ChildItem) => {
						if(this.selectBox && item.rect.intersectsWithObject(this.selectBox)) {
							this.select([item])
						}else{
							this.unSelect([item])
						}
					})
					this.canvas?.requestRenderAll()
				}
			}
		})
		this.canvas?.on('mouse:up', () => {
			this.startPointer = null
			this.selectBox && this.canvas?.remove(this.selectBox)
			this.selectBox = null
		})
	}
	clear() {
		this.activeItems = []
		this.activeItem = null
		this.topLevel.mapData.forEach((item:ChildItem) => {
			item.rect && item.rect.set({
				stroke: 'transparent'
			})
			item.isActive = false
			item.expandButton.hide()
		})
	}
	unSelect(itemList: ChildItem[]) {
		itemList.forEach(item => {
			const index = this.activeItems.findIndex(active => active === item)
			if(index > -1){
				this.activeItems.splice(index, 1)
				item.rect && item.rect.set({
					stroke: 'transparent'
				})
				item.isActive = false
				item.expandButton.hide()
			}
		})
	}
	select(itemList: ChildItem[]) {
		console.log(itemList)
		itemList.forEach(item => {
			if(!this.activeItems.includes(item)) {
				this.activeItems.push(item)
				item.rect && item.rect.set({
					stroke: '#ffa261'
				})
				item.redrawBox()
				item.isActive = true
				item.expandButton.show()
			}
		})
		if(this.activeItems.length === 1) {
			this.activeItem = this.activeItems[0]
		}else{
			this.activeItem = null
		}
	}
}